<template>
  <div class="dashboard-container">
    <div class="welcome-card">
      <el-card>
        <div class="welcome-content">
          <h2>欢迎回来，管理员！</h2>
          <p>今天是 {{ currentDate }}</p>
        </div>
      </el-card>
    </div>

    <div class="stats-cards">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <p class="stat-label">总用户数</p>
            <p class="stat-value">2,548</p>
          </div>
          <div class="stat-icon user-icon">
            <el-icon>
              <User />
            </el-icon>
          </div>
        </div>
        <div class="stat-footer">
          <span class="stat-trend positive">+12% 较上月</span>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <p class="stat-label">今日访问</p>
            <p class="stat-value">1,284</p>
          </div>
          <div class="stat-icon visit-icon">
            <el-icon>
              <Eye />
            </el-icon>
          </div>
        </div>
        <div class="stat-footer">
          <span class="stat-trend positive">+8% 较昨日</span>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <p class="stat-label">活跃用户</p>
            <p class="stat-value">856</p>
          </div>
          <div class="stat-icon active-icon">
            <el-icon>
              <UserFilled />
            </el-icon>
          </div>
        </div>
        <div class="stat-footer">
          <span class="stat-trend positive">+5% 较上周</span>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <p class="stat-label">系统状态</p>
            <p class="stat-value">正常</p>
          </div>
          <div class="stat-icon status-icon">
            <el-icon>
              <CheckCircle />
            </el-icon>
          </div>
        </div>
        <div class="stat-footer">
          <span class="stat-trend normal">最近更新: 今天</span>
        </div>
      </el-card>
    </div>

    <div class="charts-container">
      <el-card class="chart-card">
        <template #header>访问统计</template>
        <div class="chart-content">
          <el-empty description="图表将在这里显示" />
        </div>
      </el-card>

      <el-card class="chart-card">
        <template #header>用户分布</template>
        <div class="chart-content">
          <el-empty description="图表将在这里显示" />
          <!-- 实际项目中这里会放ECharts图表 -->
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 当前日期
const currentDate = ref('')

// 初始化日期
onMounted(() => {
  const date = new Date()
  const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }
  currentDate.value = date.toLocaleDateString('zh-CN', options)
})
</script>

<style scoped lang="scss">
.dashboard-container {
  .welcome-card {
    margin-bottom: 20px;

    .welcome-content {
      h2 {
        margin: 0 0 10px 0;
        color: #1d2129;
      }

      p {
        color: #86909c;
        margin: 0;
      }
    }
  }

  .stats-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;

    .stat-card {
      flex: 1;
      min-width: 200px;

      .stat-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;

        .stat-info {
          .stat-label {
            color: #86909c;
            font-size: 14px;
            margin: 0 0 5px 0;
          }

          .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #1d2129;
            margin: 0;
          }
        }

        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;

          &.user-icon {
            background-color: rgba(64, 158, 255, 0.1);
            color: #409eff;
          }

          &.visit-icon {
            background-color: rgba(103, 194, 58, 0.1);
            color: #67c23a;
          }

          &.active-icon {
            background-color: rgba(250, 173, 20, 0.1);
            color: #fadb14;
          }

          &.status-icon {
            background-color: rgba(16, 142, 233, 0.1);
            color: #108ee9;
          }
        }
      }

      .stat-footer {
        padding-top: 10px;
        border-top: 1px dashed #f2f3f5;

        .stat-trend {
          font-size: 12px;

          &.positive {
            color: #67c23a;
          }

          &.negative {
            color: #f56c6c;
          }

          &.normal {
            color: #86909c;
          }
        }
      }
    }
  }

  .charts-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

    .chart-card {
      flex: 1;
      min-width: 300px;

      .chart-content {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
